<template>
  <mars-dialog :draggable="false" top="10" left="10" :width="400" :height="800">
    <div class="item waybill">
      <div class="itemTit">
        <span class="border-green">船舶大小对过闸时长的影响</span>
      </div>
      <!-- <a-form-item label="">
        <a-form-item label="">
          <mars-select :value="formState.model1" :options="modelOptions" @change="onSelectChange1" style="float: right; width: 100px"></mars-select>
        </a-form-item>
      </a-form-item> -->
      <div id="echartsView1" style="width: 100%; height: 190px; background-color: rgba(32, 42, 68, 0.3)"></div>
    </div>
    <div class="item waybill">
      <div class="itemTit">
        <span class="border-green">船舶载货与过闸时长的关系</span>
      </div>
      <div id="echartsView2" style="width: 100%; height: 190px; background-color: rgba(32, 42, 68, 0.3)"></div>
    </div>
    <div class="item waybill">
      <div class="itemTit">
        <span class="border-green">过闸时长统计情况</span>
      </div>
      <div id="echartsView3" style="width: 100%; height: 220px; background-color: rgba(32, 42, 68, 0.3)"></div>
    </div>
  </mars-dialog>
</template>

<script setup lang="ts">
import { onUnmounted, onMounted, reactive, ref } from "vue"
import useLifecycle from "@mars/common/uses/use-lifecycle"
import * as echarts from "echarts"
import * as mapWork from "./map"
import { GetDurationByLength, GetDurationByWidth, GetDurationByWeight, GetRankedDurationByWeight } from "@mars/common/api/modules/ship"

// 启用map.ts生命周期
useLifecycle(mapWork)

interface FormState {
  model1: string
  model2: string
}
const formState = reactive<FormState>({
  model1: "2",
  model2: "2"
})

//  下拉列表数据
const modelOptions = [
  {
    value: "0",
    label: "船长"
  },
  {
    value: "1",
    label: "船宽"
  },
  {
    value: "2",
    label: "吨位"
  }
]

const onSelectChange1 = (value: string, data: any) => {
  // queryData1(value)
  formState.model1 = value
}
const onSelectChange2 = (value: string, data: any) => {
  // queryData1(value)
  formState.model1 = value
}

let myChart1: any
let myChart2: any
let myChart3: any
onMounted(() => {
  myChart1 = echarts.init(document.getElementById("echartsView1"), "dark")
  myChart2 = echarts.init(document.getElementById("echartsView2"), "dark")
  myChart3 = echarts.init(document.getElementById("echartsView3"), "dark")

  queryData1()
  queryData2()
  queryData3()
})

const resize = () => {
  myChart1.resize()
  myChart2.resize()
  myChart3.resize()
}
function queryData1() {
  GetDurationByLength(null).then((res) => {
    if (res.ResultType === "Success") {
      showChart1(res.Data)
    } else {
      // $message(res.msg)
    }
  })
}
function queryData2() {
  GetDurationByWeight({}).then((res) => {
    if (res.ResultType === "Success") {
      showChart2(res.Data)
    } else {
      // $message(res.msg)
    }
  })
}
function queryData3() {
  GetRankedDurationByWeight({}).then((res) => {
    if (res.ResultType === "Success") {
      showChart3(res.Data)
    } else {
      // $message(res.msg)
    }
  })
}
function showChart1(data) {
  const xArr = []
  const yArr = []
  data.forEach((element) => {
    xArr.push(element.Part)
    yArr.push(element.Cost_Time / element.Count / 3600)
  })

  const option = {
    tooltip: {
      trigger: "item"
    },
    grid: {
      top: "18%",
      bottom: "10%",
      left: "5%",
      right: "12%",
      // width: "90%",
      // height: "85%",
      containLabel: true
    },
    xAxis: {
      name: "船长",
      data: xArr,
      axisLabel: {
        show: true,
        interval: 0,
        rotate: 25,
        textStyle: {
          fontSize: "12px",
          color: "#fff"
        }
      },
      axisLine: {
        interval: 0,
        lineStyle: {
          color: "#fff",
          width: 1
        }
      }
    },

    yAxis: {
      name: "平均过闸时长",
      axisLabel: {
        show: true,
        textStyle: {
          fontSize: "12px",
          color: "#fff"
        }
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
          width: 1
        }
      },
      splitLine: {
        show: false
      }
    },

    series: {
      name: "",
      type: "bar",
      barWidth: 12,
      data: yArr,
      itemStyle: {
        normal: {
          barBorderRadius: [5, 5, 5, 5],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#3876cd"
            },
            {
              offset: 0.5,
              color: "#45b4e7"
            },
            {
              offset: 1,
              color: "#54ffff"
            }
          ])
        }
      }
    }
  }
  myChart1.setOption(option)
}
function showChart2(data) {
  const xArr = []
  const yArr = []
  data.forEach((element) => {
    xArr.push(element.Part)
    yArr.push(element.Cost_Time / element.Count / 3600)
  })

  const option = {
    tooltip: {
      trigger: "item"
    },
    grid: {
      top: "18%",
      bottom: "10%",
      left: "5%",
      right: "12%",
      // width: "90%",
      // height: "85%",
      containLabel: true
    },
    xAxis: {
      name: "吨级",
      data: xArr,
      axisLabel: {
        show: true,
        interval: 0,
        rotate: 25,
        textStyle: {
          fontSize: "12px",
          color: "#fff"
        }
      },
      axisLine: {
        interval: 0,
        lineStyle: {
          color: "#fff",
          width: 1
        }
      }
    },

    yAxis: {
      name: "平均过闸时长",
      axisLabel: {
        show: true,
        textStyle: {
          fontSize: "12px",
          color: "#fff"
        }
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
          width: 1
        }
      },
      splitLine: {
        show: false
      }
    },

    series: {
      name: "",
      type: "bar",
      barWidth: 12,
      data: yArr,
      itemStyle: {
        normal: {
          barBorderRadius: [5, 5, 5, 5],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#3876cd"
            },
            {
              offset: 0.5,
              color: "#45b4e7"
            },
            {
              offset: 1,
              color: "#54ffff"
            }
          ])
        }
      }
    }
  }
  myChart2.setOption(option)
}
function showChart3(data) {
  const option = {
    color: ["#fd8f1e", "#7cb5ec", "#4280f1", "#957bde"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: "2%",
      right: "6%",
      bottom: "24%",
      top: "5%",
      containLabel: true,
      z: 22
    },

    legend: {
      data: ["0-1000", "1000-2000", "2000-3000", "3000-4000", "4000-5000", ">5000"],
      textStyle: {
        fontSize: 12,
        color: "#fff"
      },
      icon: "rect",
      itemWidth: 12,
      itemHeight: 8,
      bottom: "0%"
    },
    xAxis: {
      nameTextStyle: {
        color: "#fff"
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: "#fff",
          fontSize: 12
        }
      },
      splitLine: {
        lineStyle: {
          color: "#24214e"
        }
      },
      axisLine: {
        lineStyle: {
          type: "solid",
          color: "#24214e",
          width: "1  "
        }
      }
    },
    yAxis: {
      name: "过闸时长/小时",
      data: ["0-12", "12-24", "24-36", "36-48", ">48"],
      axisLabel: {
        show: true,
        textStyle: {
          color: "#fff",
          fontSize: 12
        }
      },
      axisLine: {
        lineStyle: {
          type: "solid",
          color: "#24214e",
          width: "1  "
        }
      }
    },
    series: [
      {
        name: "0-1000",
        type: "bar",
        stack: "总量",
        barWidth: 15,
        label: {
          normal: {
            show: false,
            position: "insideRight"
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: 1, // 统计条弧度
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "#2F89CF" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#2F89CF" // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          }
        },
        data: [848, 1195, 1585, 723, 459]
      },
      {
        name: "1000-2000",
        type: "bar",
        barWidth: 10,
        stack: "总量",
        label: {
          normal: {
            show: false,
            position: "insideRight"
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: 1, // 统计条弧度
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "#4CB9CF" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#4CB9CF" // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          }
        },
        data: [4975, 7305, 9926, 4305, 3608]
      },
      {
        name: "2000-3000",
        type: "bar",
        stack: "总量",
        barWidth: 10,
        label: {
          normal: {
            show: false,
            position: "insideRight"
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: 1, // 统计条弧度
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "#53B666" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#53B666" // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          }
        },
        data: [2321, 3258, 4689, 2197, 1948]
      },
      {
        name: "3000-4000",
        type: "bar",
        stack: "总量",
        barWidth: 10,
        label: {
          normal: {
            show: false,
            position: "insideRight"
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: 1, // 统计条弧度
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "#03F5CC" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#03F5CC" // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          }
        },
        data: [1061, 1408, 2234, 968, 845]
      },
      {
        name: "4000-5000",
        type: "bar",
        stack: "总量",
        barWidth: 10,
        label: {
          normal: {
            show: false,
            position: "insideRight"
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: 1, // 统计条弧度
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "#03F5CC" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#03F5CC" // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          }
        },
        data: [1589, 2260, 3482, 1553, 1475]
      },
      {
        name: ">5000",
        type: "bar",
        stack: "总量",
        barWidth: 10,
        label: {
          normal: {
            show: false,
            position: "insideRight"
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: 1, // 统计条弧度
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "#03F5CC" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#03F5CC" // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          }
        },
        data: [267, 356, 541, 250, 258]
      }
    ]
  }
  myChart3.setOption(option)
}
onUnmounted(() => {
  if (myChart1) {
    myChart1.dispose()
  }
})
</script>
<style lang="less">
.item {
  // margin-bottom: 10px;
}
.itemTit {
  padding: 10px 30px;
}
.itemTit span {
  height: 20px;
  line-height: 20px;
  border-left: 4px solid transparent;
  font-size: 17px;
}
</style>
